<script setup>
import { useDetailStore } from '@/stores/detail.js';
const detailStore = useDetailStore();
</script>
<template>
	<div class="detail-desc">
		<h4 class="title">{{ detailStore.goods.name }}</h4>
		<p class="desc">{{ detailStore.goods.desc }}</p>
		<div class="priceBox">
			<span class="price">{{ detailStore.goods.price }}</span>
			<span class="oldPrice">{{ detailStore.goods.oldPrice }}</span>
		</div>
		<ul class="properties">
			<li v-for="item in detailStore.goods.details?.properties" :key="item.value">
				<p>{{ item.name }}</p>
				<p>{{ item.value }}</p>
			</li>
		</ul>
	</div>
</template>
<style scoped lang="scss">
.detail-desc {
	width: 600px;

	.title {
		margin-bottom: 10px;
		font-size: 20px;
		font-weight: normal;
	}

	.desc {
		color: #999;
		margin-bottom: 10px;
	}

	.price {
		&::before {
			content: '¥';
			font-size: 16px;
			margin-right: 2px;
		}

		font-size: 22px;
		color: $priceColor;
	}

	.oldPrice {
		font-size: 18px;
		color: #999;
		margin-left: 10px;
		text-decoration: line-through;

		&::before {
			content: '¥';
			font-size: 14px;
			margin-right: 2px;
		}
	}

	.properties {
		margin-top: 10px;
		background-color: #f7f7f7;
		padding: 20px 10px;

		li {
			display: flex;

			&:not(:last-child) {
				margin-bottom: 10px;
			}

			p {
				&:first-child {
					min-width: 60px;
					max-width: 80px;
					color: #999;
					margin-right: 20px;
				}
			}
		}
	}

	.addCartBtn {
		margin-top: 40px;
	}
}
</style>